<template>
	<view>
		<view>
			<image class=""
				style="position: absolute; top:0;bottom:110rpx;left:0;right:0;width: 575rpx; height: 300rpx; z-index: 1; margin-left: 20rpx; margin-top: 10rpx;"
				src="../../static/head_bg.png"></image>
			<!-- margin-top: 40rpx; margin-left: 50rpx; -->
			<view style="z-index: 99;  position: absolute; top: 41rpx; left: 50rpx;">
				<image src="../../static/headframe.png" style="height: 160rpx; width: 155rpx; "></image>
			</view>

			<view class="flex"
				style="height: 130rpx;z-index: 1; position: absolute; top: 42rpx; left: 50rpx; align-items: center;">
				<image @click="ChangeHead" class="" style="height: 128rpx; width: 130rpx; border-radius: 25%;"
					:src="HeadUrl"></image>
				<view class="ml2" style="color: #000000;font-size: 30rpx;">{{NickName}}</view>
			</view>
			
			<!-- 条款与规则 -->
			<view class="flex" style=" position: absolute;top: 340rpx;left: 20rpx;right: 20rpx; color: #FFFFFF; font-size: 25rpx;font-weight: bold;justify-content: space-between; align-items: center;">
				<view style="letter-spacing: 7rpx;">
					条款与规则
				</view>
				<view style="letter-spacing: -10rpx; font-size: 30rpx;">
					>>>>>>>>>
				</view>
				
				</view>

			<!-- 中间背景图 -->
			<view class="" style="height: 490rpx; position: absolute;top: 400rpx;left: 20rpx;right: 20rpx;">
				<image style="height: 100%;width: 100%;border-radius: 20rpx;" src="../../static/ziliao_bg.png"></image>
			</view>
			<!-- 中间图标 第一行 -->
			<view class=" flex" style="position: absolute;top: 440rpx;left: 20rpx;right: 20rpx; height: 196rpx;margin-left: 5rpx; margin-right: 30rpx;">
				<!-- 第一个图标 -->
				<view class=" flex"
					style="flex-direction: column;height: 180rpx; width: 175rpx;background-color: #FFFFFF;border-radius: 25rpx; border: #000000 8rpx solid;align-items:  center; margin-left: 30rpx;">
					<view class="flex"
						style="height: 75rpx;width: 90rpx;justify-content: center;align-items: center; margin-top: 15rpx;">
						<image src="../../static/anniu1.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view style="height: 25rpx; margin-top: 15rpx; font-size: 25rpx; color: #C9A362;">0</view>
					<view style="height: 20rpx; margin-top: 10rpx; font-size: 25rpx;">商城积分</view>
				</view>
				<!-- 第二个图标 -->
				<view class=" flex"
					style="flex-direction: column;height: 180rpx; width: 175rpx;background-color: #FFFFFF;border-radius: 25rpx; border: #000000 8rpx solid;align-items:  center; margin-left: 30rpx;">
					<view class="flex"
						style="height: 75rpx;width: 90rpx;justify-content: center;align-items: center; margin-top: 15rpx;">
						<image src="../../static/anniu1.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view style="height: 25rpx; margin-top: 15rpx; font-size: 25rpx; color: #C9A362;">0</view>
					<view style="height: 20rpx; margin-top: 10rpx; font-size: 25rpx;">商城积分</view>
				</view>
				<!-- 第三个图标 -->
				<view class=" flex"
					style="flex-direction: column;height: 180rpx; width: 175rpx;background-color: #FFFFFF;border-radius: 25rpx; border: #000000 8rpx solid;align-items:  center; margin-left: 30rpx;">
					<view class="flex"
						style="height: 75rpx;width: 90rpx;justify-content: center;align-items: center; margin-top: 15rpx;">
						<image src="../../static/anniu1.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view style="height: 25rpx; margin-top: 15rpx; font-size: 25rpx; color: #C9A362;">0</view>
					<view style="height: 20rpx; margin-top: 10rpx; font-size: 25rpx;">商城积分</view>
				</view>
			</view>

			<!-- 中间图标 第二行 -->
			<view class=" flex" style="position: absolute;top: 676rpx;left: 20rpx;right: 20rpx; height: 196rpx;margin-left: 5rpx; margin-right: 30rpx;">
				<!-- 第四个图标 -->
				<view class=" flex"
					style="flex-direction: column;height: 180rpx; width: 175rpx;background-color: #FFFFFF;border-radius: 25rpx; border: #000000 8rpx solid;align-items:  center; margin-left: 30rpx;">
					<view class="flex"
						style="height: 75rpx;width: 90rpx;justify-content: center;align-items: center; margin-top: 15rpx;">
						<image src="../../static/anniu1.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view style="height: 25rpx; margin-top: 15rpx; font-size: 25rpx; color: #C9A362;">0</view>
					<view style="height: 20rpx; margin-top: 10rpx; font-size: 25rpx;">商城积分</view>
				</view>
				<!-- 第五个图标 -->
				<view class=" flex"
					style="flex-direction: column;height: 180rpx; width: 175rpx;background-color: #FFFFFF;border-radius: 25rpx; border: #000000 8rpx solid;align-items:  center; margin-left: 30rpx;">
					<view class="flex"
						style="height: 75rpx;width: 90rpx;justify-content: center;align-items: center; margin-top: 15rpx;">
						<image src="../../static/anniu1.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view style="height: 25rpx; margin-top: 15rpx; font-size: 25rpx; color: #C9A362;">0</view>
					<view style="height: 20rpx; margin-top: 10rpx; font-size: 25rpx;">设置</view>
				</view>


			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				HeadUrl: "",
				NickName: ""
			}
		},
		onLoad() {
			uni.request({
				url: this.baseUrl + '/frontend', //仅为示例，并非真实接口地址。
				method: "POST",
				data: {
					actionid: 20010,
					RoleGuid: "19f05c70e76411eaac42b42e99ce0512"
				},
				header: {
					'content-type': 'application/json',
				},
				success: (res) => {
					console.log(res.data)
					this.NickName = res.data.NickName
					this.HeadUrl = res.data.Head
				}
			});
		},
		methods: {
			ChangeHead() {
				console.log("进来了啊")
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.baseUrl + "/save_head",
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'd': '{"RoleGuid": "19f05c70e76411eaac42b42e99ce0512"}',
							},
							success: (uploadFileRes) => {
								const resData = JSON.parse(uploadFileRes.data)
								this.HeadUrl = resData.Head

							}
						});
					}
				});

			}
		}
	}
</script>

<style>
	page {

		background-color: #000000;

	}



	.shape2 {
		-webkit-clip-path: polygon(60% 7%, 77% 9%, 81% 27%, 77% 75%, 38% 79%, 10% 77%, 7% 65%, 7% 50%, 7% 19%, 16% 6%);
		clip-path: polygon(60% 7%, 77% 9%, 81% 27%, 77% 75%, 38% 79%, 10% 77%, 7% 65%, 7% 50%, 7% 19%, 16% 6%);
	}
</style>
